<template>
  <transition name="slide">
    <div class="list" min-height="540px">
      <van-nav-bar title="校园招聘" leftText="返回" rightText="1" leftArrow @click-left="onClickLeft" @click-right="onClickRight" />
      <!-- <div class="scroll-wrapper" :ref="scroll-wrapper">
        <cube-scroll ref="scroll" :data="items" :options="options" @pulling-up="onPullingUp" @pulling-down="onPullingDown"></cube-scroll>
      </div> -->
      <van-tabs v-model="active" sticky swipeable>
        <van-tab v-for="(items,index) in List" :title="items.title" :key="index" >
          <div class="contentWrap">
            <ul>
              <li class="jobItem" v-for="(item,indexs) in items.directory" :key="indexs" @click="goJobArticle(indexs,index)">
                <div class="title">{{item.title}}</div>
                <div class="time">{{item.time}}</div>
                <div class="place">地点：{{item.place}}</div>
              </li>
            </ul>
          </div>
        </van-tab>
      </van-tabs>
      <router-view></router-view>
    </div>
  </transition>
</template>
<script>
import Vue from "vue";
import store from "../../common/store";
import { Loading } from "vant";
import { Tab, Tabs } from 'vant';

Vue.use(Tab).use(Tabs);
Vue.use(Loading);

export default{
  data (){
    return {
      active:'',
      List:[
        {
          title:"北校区",
          EnName:'north',
          directory:[
            // {
            //   title:'西安中科创星科技孵化器有限公司',
            //   place:'J-605',
            //   time:'2018-05-21 00:00'
            // },
          
          ]
        },
        {
          title:"南校区",
          EnName:'south',
          directory:[
            
          ]
        }
      ]
    }
  },
  methods:{
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      this.$router.push("/login/mint-pull");
    },
    goJobArticle (indexs,index){
      // console.log(indexs,index)
      this.$router.push({ path: '/index/jobsDetail/jobArticle' , query: { jobArticleId: this.List[index].directory[indexs].id}})
    
    }
  },
  created (){
      this.$apis.getJobList1({area:'north'},store.state.accesskey).then(res =>{
        this.List[0].directory = []
        for(let value of res.msg){
          let id = value[0]
          let title = value[1]
          let time = value.time
          let place = value[4]

          this.List[0].directory.push({id,title,time,place})
        }
      })
      this.$apis.getJobList2({area:'sourth'},store.state.accesskey).then(res =>{
        // console.log(res)
        this.List[1].directory = []
        for(let value of res.msg){
          let id = value[0]
          let title = value[1]
          let time = value.time
          let place = value[4]
          this.List[1].directory.push({id,title,time,place})
        }
      })
  }
}
</script>

<style lang="less" scoped>
@import "../../assets/less/baseDetail.less";
.van-tabs__content{
  position: relative;
}
.contentWrap{
  height: calc(~'100% - 90px');
  overflow: scroll;
}
.jobItem{
  width: 100%;
  border-bottom: 1px solid #eee;
  padding: 15px 0;
}
.jobItem:after{
  content:""; 
  display:block; 
  clear:both;
}
.title{
  font-size: 16px;
  line-height: 30px;
  color: rgba(75, 146, 194, 0.705);
  margin: 0 0 10px 0;
  margin-left: 5%;
}
.time,.place{
  font-size: 12px;
}
.time{
  float: left;
  margin-left: 5%;
}
.place{
  float: right;
  margin-right: 5%;
}
</style>
